<template>
	<view class="container">
		<view class="top-fix-box" :style="topFixStytle">
			<!-- <view class="breadcrumb-box">
				<wjf-stat-breadcrumb :routes="routes"></wjf-stat-breadcrumb>
				<view class="right-icon-box">
					<text>我要报名</text>
					<uni-icons type="right" color="#888" size="15"></uni-icons>
				</view>
			</view> -->
			<view class="scroll-view-box">
				<uv-tabs :list="scrollList" @click="onClickScrollItem" class="uv-tabs"></uv-tabs>
			</view>
		</view>
		<view class="" style="width: 100%;height: 50px;"></view>

		<!-- <uv-navbar bg-color="rgba(0,0,0,0)">
			<template v-slot:left>
				<view class="uv-nav-slot-left" @click="goBack">
					<uv-icon name="arrow-left" size="20" color="#ffffff"></uv-icon>
				</view>
			</template>
		</uv-navbar> -->
		<!-- <view class="top-swiper-box">
			<uv-swiper height="210" :list="swiperList" imgMode="scaleToFill" indicator circular
				interval="4000"></uv-swiper>
		</view> -->
		<!-- <view class="welcom-box">
			<uv-list>
				<uv-list-item :title="$w('期待您的参与')" thumb="/static/img/welcom.png" :right-text="$w('我要报名')" show-arrow
					clickable @click="toRegistration"></uv-list-item>
			</uv-list>
			<uv-line></uv-line>
		</view> -->
		<!-- <view class="" @click="test">
			<button type="default">test</button>
		</view> -->
		<view class="content-box">
			<view class="title-box">
				<text class="title-text">{{eventData.title[locaLang]}}</text>
			</view>
			<view class="theme-box" id="title_0">
				<text class="theme-text">{{eventData.theme[locaLang]}}</text>
			</view>
			<!-- <uv-read-more ref="readMore" show-height="150rpx" :closeText="$w('展开')" :openText="$w('收起')" :toggle="true">
				<view class="theme-box">
					<text class="theme-text">{{eventData.theme[locaLang]}}</text>
				</view>
			</uv-read-more> -->
			<view class="unit-box">
				<view class="note-box" id="title_1">
					<text>{{$w('组团单位')}}：</text>
					<uv-line class="line-top-10" dashed></uv-line>
				</view>

				<template v-for="(item,index) in eventData.delegationUnit" :key="index">
					<view class="unit-item-box">
						<view class="logo-box" v-if="item.logo">
							<image :src="item.logo" mode="aspectFit"></image>
						</view>
						<view class="unit-name-box">
							<text>{{item.name[locaLang]}}</text>
						</view>
					</view>
				</template>
			</view>
			<view class="registration-method-box" id="title_2">
				<uv-list>
					<uv-list-item>
						<template v-slot:default>
							<view class="registration-method-list-box">
								<view class="item-left">
									<text class="title">{{$w('报名方式')}}：</text>
								</view>
								<view class="item-right" @click="toRegistration">
									<text>{{$w('我要报名')}}</text>
									<uni-icons type="right"></uni-icons>
								</view>
								<!-- <text class="title-2">{{$w('了解报名方式')}}</text> -->
							</view>
							<uv-line class="line-top-10" dashed></uv-line>
						</template>
					</uv-list-item>
				</uv-list>

				<view class="content-box" v-if="eventData.regis_methods">
					<text>{{eventData.regis_methods?eventData.regis_methods[locaLang]:' '}}</text>
				</view>
			</view>
			<view class="registration-box" id="title_3">
				<uv-list>
					<uv-list-item>
						<template v-slot:default>
							<view class="registration-date-box">
								<text class="title-1">{{$w('报名日期')}}：</text>
								<!-- <text class="title-2">{{$w('了解报名方式')}}</text> -->
							</view>
							<uv-line class="line-top-10" dashed></uv-line>
						</template>
					</uv-list-item>
				</uv-list>

				<view class="content-box">
					<text>{{eventData.registration.starts ? `${eventData.registration.starts} - ${eventData.registration.ends}`:`${$w('报名截止日期')}：${eventData.registration.ends}`}}</text>
				</view>
			</view>
			<view class="event-box">
				<view class="note-box" id="title_4">
					<text>{{$w('活动日期')}}：</text>
					<uv-line class="line-top-10" dashed></uv-line>
				</view>
				<view class="content-box">
					<text>{{ `${eventData.event.starts} - ${eventData.event.ends}`}}</text>
				</view>
			</view>
			<view class="cost-box">
				<view class="note-box" id="title_5">
					<text>{{$w('人均费用')}}：</text>
					<text class="normal-text">{{ eventData.cost}}</text>
				</view>
				<uv-line class="line-top-10" dashed></uv-line>
			</view>
			<view class="cost_detail-box">
				<view class="note-box">
					<text>{{$w('费用详细')}}：</text>
				</view>
				<view class="content-box">
					<text>{{eventData.cost_detail[locaLang]}}</text>
				</view>
			</view>
			<view class="itinerary-box">
				<view class="note-box" id="title_6" style="margin-left: 20rpx;">
					<text>{{$w('日程计划')}}：</text>
				</view>
				<template v-for="(item,index) in eventData.itinerary" :key="index">
					<view class="itinerary-item-box">
						<view class="day-box">
							<text>{{item.day[locaLang]}}</text>
							<text>{{`(${item.date[locaLang]})`}}</text>
						</view>
						<view class="itinerary-content-box">
							<text>{{item.content[locaLang]}}</text>
						</view>
					</view>
				</template>
				<!-- <uv-read-more ref="readMoreItinerary" show-height="300rpx" :closeText="$w('展开')" :openText="$w('收起')"
					:toggle="true">
					<template v-for="(item,index) in eventData.itinerary" :key="index">
						<view class="itinerary-item-box">
							<view class="day-box">
								<text>{{item.day[locaLang]}}</text>
								<text>{{`(${item.date[locaLang]})`}}</text>
							</view>
							<view class="itinerary-content-box">
								<text>{{item.content[locaLang]}}</text>
							</view>
						</view>
					</template>
				</uv-read-more> -->
			</view>
			<view class="detail-img-box">
				<template v-for="(item,index) in eventData.event_detail_imgs" :key="index">
					<view class="image-box">
						<image :src="item" mode="widthFix"></image>
					</view>
				</template>
			</view>

		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />

		<view class="bottom-zhanwei"></view>
		<uv-modal ref="uvModal" :title="uvModelParam.title" :content='uvModelParam.content' :align="uvModelParam.align"
			:confirmText="uvModelParam.confirmText" :cancelText="uvModelParam.cancelText"
			:showCancelButton="uvModelParam.showCancelButton"></uv-modal>
		<view class="">
			<ap126-footer></ap126-footer>
		</view>
	</view>
</template>

<script>
	import dayjs from "dayjs"
	const db = uniCloud.database()
	import commMixinWjf from '@/common/mixin/common-mixin-wjf.js'
	import message from './i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		mixins: [commMixinWjf],
		data() {
			return {
				windowWidth: 0,
				windowLeft: '0px',
				topBoxWidth: '800px',
				formDataId: '',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				content: [{
					iconPath:'/static/images/regist.png',
					selectedIconPath:'/static/images/regist-select.png',
					text: '我要报名',
					active: false
				}],
				eventData: {
					evnet_ID: 'E-',
					delegationUnit: [{
						name: {
							"zh-Hans": '',
							en: '',
							ru: '',
							kk: ''
						},
						logo: '',
						showTranslate: false
					}], //组团单位
					title: {
						"zh-Hans": '',
						en: '',
						ru: '',
						kk: ''
					},
					theme: {
						"zh-Hans": '',
						en: '',
						ru: '',
						kk: ''
					},
					event_thumb: '',
					event_banner: [],
					event_detail_imgs: [],
					registration: {
						starts: '',
						ends: ''
					},
					event: {
						starts: '',
						ends: ''
					},
					itinerary: [],
					cost: '',
					cost_detail: {
						"zh-Hans": '',
						en: '',
						ru: '',
						kk: ''
					},
					is_on_line: true
				},
			}
		},
		computed: {
			swiperList() {
				return this.eventData.event_banner
			},
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			},
			userInfo() {
				return this.$store.state.user.userInfo
			},
			routes() {
				return [{
						to: "/pages/expo-forum/expo-forum",
						name: this.$w("展会活动"),
					},
					{
						to: "",
						name: this.$w("活动详情"),
					}
				]
			},
			topFixStytle() {
				return {
					top: '170px',
					left: this.windowLeft,
					width: this.topBoxWidth
				}
			},
			scrollList() {
				return [{
						name: this.$w('主题'),
						id: 'title_0',
						top: 0
					},
					{
						name: this.$w('组团单位'),
						id: 'title_1',
						top: 0
					},
					{
						name: this.$w('报名日期'),
						id: 'title_2',
						top: 0
					},
					{
						name: this.$w('报名方式'),
						id: 'title_3',
						top: 0
					},
					{
						name: this.$w('活动日期'),
						id: 'title_4',
						top: 0
					},
					{
						name: this.$w('费用'),
						id: 'title_5',
						top: 0
					},
					{
						name: this.$w('日程'),
						id: 'title_6',
						top: 0
					}
				]
			}
		},
		watch: {
			locaLang() {
				this.getEvnetData(this.formDataId)
				this.$nextTick(() => {
					this.getNodesPosition(); // 确保页面渲染完成后再执行定位
				});
				// console.log('语言变化');
			}
		},
		onLoad(e) {
			this.formDataId = e.id
			this.getEvnetData(e.id)
			// this.$nextTick(() => {
			// 	this.$refs.readMore.init();
			// })
		},
		mounted() {
			this.$nextTick(() => {
				this.getNodesPosition(); // 确保页面渲染完成后再执行定位
			});
		},
		onReady() {
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			if (this.windowWidth > 800) {
				this.topBoxWidth = '800px'
				this.windowLeft = (this.windowWidth / 2 - 400) + 'px'
			} else {
				this.topBoxWidth = this.windowWidth + 'px'
				this.windowLeft = '0px'
			}
			uni.onWindowResize((res) => {
				this.windowWidth = res.size.windowWidth
				if (this.windowWidth > 800) {
					this.topBoxWidth = '800px'
					this.windowLeft = (this.windowWidth * 1 / 2 - 400) + 'px'
				} else {
					this.topBoxWidth = this.windowWidth + 'px'
					this.windowLeft = '0px'
				}
			})
			// this.$nextTick(() => {
			// 	this.getNodesPosition(); // 确保页面渲染完成后再执行定位
			// });
		},
		beforeDestroy() {
			uni.offWindowResize()
		},
		methods: {
			test() {
				let res = uni.getSystemInfoSync()
				console.log(res.screenWidth, res.windowWidth);
			},
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				this.toRegistration()
			},
			fabClick() {
				this.content[0].active = false
				// uni.showToast({
				// 	title: '点击了悬浮按钮',
				// 	icon: 'none'
				// })
			},
			getNodesPosition() {
				console.log('读取节点数据');
				this.scrollList.forEach(item => {
					uni.createSelectorQuery()
						.select(`#${item.id}`)
						.boundingClientRect(rect => {
							// item.top = rect.top - 80
							item.top = rect.top
						})
						.exec();
				});
			},
			onClickScrollItem(e) {
				uni.pageScrollTo({
					scrollTop: e.top, // 滚动到该容器的位置
					duration: 300 // 滚动动画持续时间
				});
			},
			// 预报名，先检查是否登录
			// toRegistration() {
			// 	const {
			// 		tokenExpired
			// 	} = uniCloud.getCurrentUserInfo()
			// 	if (tokenExpired < Date.now() || Object.keys(this.$store.state.user.userInfo).length == 0) {
			// 		this.$uvModal({
			// 			content: '您还没登录或登录已过期，请您重新登录。',
			// 			align: 'center',
			// 			showCancelButton: true,
			// 			cancelText: '放弃'
			// 		}, () => {
			// 			this.reLogin()
			// 		})
			// 	} else {
			// 		uni.navigateTo({
			// 			url: '/pages/expo-forum/event-registration?id=' + this.formDataId,
			// 			success: res => {},
			// 			fail: () => {},
			// 			complete: () => {}
			// 		});
			// 	}
			// },

			/**
			 * 报名，如果需要先检查注册或登录状态，参考上面的方法
			 */
			toRegistration() {
				uni.navigateTo({
					url: '/pages/expo-forum/event-registration?id=' + this.formDataId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			reLogin() {
				let url = '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl='
				let paramString = '/pages/expo-forum/event-detail?id=' + this.formDataId
				// paramString = paramString.substring(0, paramString.length - 1) //携带参数，实现登录成功后 跳回首页时传回
				url += encodeURIComponent(paramString)
				return uni.reLaunch({
					url
				})
			},
			getEvnetData(id) {
				db.collection('tian-events').doc(id).get().then(({
					result
				}) => {
					// console.log(result.data[0]);
					this.eventData = Object.assign({}, this.eventData, result.data[0])
					this.$nextTick(() => {
						// this.$refs.readMore.init();
						// this.$refs.readMoreItinerary.init();

					})
				})
			},
			goBack() {
				uni.switchTab({
					url: '/pages/expo-forum/expo-forum'
				})
				// uni.navigateBack({
				// 	delta: 1,
				// 	fail: () => {
				// 	}
				// });

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef;
	}

	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		// background-color: #eee;
	}

	.top-fix-box {
		position: fixed;
		background-color: #eee;
		z-index: 90;

		.breadcrumb-box {
			margin: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.right-icon-box {
				margin-right: 10rpx;

				text {
					margin-right: 20rpx;
				}
			}
		}
	}

	.scroll-view-box {

		// height: 80rpx;
		// margin-left: 6rpx;
		// background-color: #008080;
		// display: flex;
		// overflow: hidden;
		// justify-content: center;
		// align-items: center;
		.uv-tabs {
			cursor: pointer;
		}

	}

	.line-top-10 {
		padding-top: 10rpx;
	}

	.uv-nav-slot-left {
		margin-left: 10rpx;
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-swiper-box {
		width: 100%;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		overflow: hidden;
		/* 使圆角效果生效 */
	}

	.welcom-box {
		// margin: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.content-box {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.title-box {
			// background-color: greenyellow;
			text-align: center;
			// display: flex;
			// justify-content: center;
			padding: 20rpx 30rpx;

			.title-text {
				width: 85%;
				font-size: 32rpx;
				color: #555;
				font-weight: 550;
			}
		}

		.theme-box {
			padding: 0 20rpx 30rpx 20rpx;

			.theme-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.05;
			}
		}

		.note-box {
			margin: 10rpx 20rpx 0 10rpx;

			text {
				color: #666;
				font-weight: 550;
				font-size: 32rpx;
			}

			.normal-text {
				font-size: 28rpx;
				color: #555;
				font-weight: 400;
			}
		}

		.content-box {
			text {
				font-size: 28rpx;
				color: #555;
			}

		}

		.unit-box {
			margin-top: 20rpx;

			.unit-item-box {
				display: flex;
				flex-direction: row;
				align-items: center;

				.logo-box {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.unit-name-box {
					flex: 1;
					margin-left: 20rpx;

					text {
						color: #555;
						font-size: 30rpx;
					}
				}
			}
		}

		.registration-box {
			margin: 30rpx 20rpx 20rpx 20rpx;

			.registration-date-box {
				display: flex;
				justify-content: space-between;

				.title-1 {
					color: #666;
					font-weight: 550;
					font-size: 32rpx;
				}

				.title-2 {
					color: #666;
					font-size: 26rpx;
				}
			}
		}

		.registration-method-box {
			margin: 30rpx 20rpx;

			.registration-method-list-box {
				display: flex;
				justify-content: space-between;

				.item-left {
					.title {
						color: #666;
						font-weight: 550;
						font-size: 32rpx;
						line-height: 1.05;
					}
				}

				.item-right {
					display: flex;
					align-items: center;

					text {
						color: #cb010d;
						font-size: 28rpx;
						font-weight: 600;
						margin-right: 20rpx;
						line-height: 1.05;
					}
				}
			}
		}

		.cost_detail-box {
			margin-left: 30rpx;
		}

		.event-box,
		.cost-box,
		.itinerary-box {
			margin: 30rpx 20rpx 20rpx 20rpx;
		}

		.itinerary-box {
			margin-bottom: 50rpx;

			.itinerary-item-box {
				border: #f40 dotted 2rpx;
				border-radius: 10rpx;
				margin: 20rpx 10rpx;
				padding: 10rpx;

				// background-color: #efefef;
				.day-box {
					margin-top: 10rpx;
					display: flex;
					justify-content: center;

					text {
						font-size: 28rpx;
						color: #555;
						font-weight: 550;
					}
				}

				.itinerary-content-box {
					text {
						font-size: 28rpx;
						color: #666;
					}
				}
			}
		}

		.detail-img-box {
			margin-top: 30rpx;
			width: 100%;

			.image-box {
				width: 100%;

				image {
					width: 100%;
				}
			}
		}
	}

	.bottom-zhanwei {
		height: 100rpx;
	}
</style>